<template>
  <draggable
    :list="config.children"
    animation="300"
    group="site"
    class="row-container"
    ghostClass="ghost"
    :style="cardStyle"
  >
    <el-col
      v-for="(item, index) in config.children"
      :span="item['__config__'].span"
      :key="index"
      @click.native.stop="changeComponent(item)"
      class="render-col"
    >
      <div class="tools-div" :class="{ vis: item.id === activeId }">
        <el-button
          type="info"
          icon="el-icon-folder-add"
          circle
          @click.stop="save(item)"
          v-if="params['__componentName__'] === 'htmlComponent'"
        ></el-button>
        <el-button
          type="info"
          icon="el-icon-document-copy"
          circle
          @click.stop="copy(item)"
        ></el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          circle
          @click.stop="remove(item)"
        ></el-button>
      </div>
      <site-component :params="item" :activeId="activeId"></site-component>
    </el-col>
  </draggable>
</template>

<script>
import { createNamespacedHelpers, mapGetters } from "vuex";
const { mapMutations } = createNamespacedHelpers("view");
import draggable from "vuedraggable";
const siteComponent = () => import("./site.vue");
export default {
  name: "draggableItem",
  components: {
    draggable,
    siteComponent,
  },
  inject: ["ancestors"],
  props: {
    params: Object,
    activeId: [String, Number],
    cardStyle: [Array, Object],
  },
  data() {
    return {};
  },
  computed: {
    options() {
      return this.params["__options__"];
    },
    config: {
      get() {
        return this.params["__config__"];
      },
      set(val) {
        this.params["__config__"] = val;
      },
    },
    vModel: {
      get() {
        return this.params["__vModel__"];
      },
      set(val) {
        this.params["__vModel__"] = val;
      },
    },
    slot() {
      return this.params["__slot__"];
    },
    field() {
      return this.params["__field__"];
    },
    componentName() {
      return this.params["__componentName__"];
    },
    ...mapGetters(["componentsList", "component"]),
  },
  methods: {
    ...mapMutations({
      updateComponentsList: "UPDATE_COMPONENTS_LIST",
    }),
    changeComponent(item) {
      this.ancestors.changeComponent(item);
    },
    remove(item) {
      this.ancestors.remove(item);
    },
    copy(item) {
      this.ancestors.copy(item);
    },
    save(item) {
      this.ancestors.save(item);
    },
    getStyle(style) {
      return style.map((item) => {
        return {
          [item.label]: item.value,
        };
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.row-container {
  min-height: 100rem;
  padding: 10px;
}
</style>